<template>
  <div class="makespreadimg">
    <a-card :bordered="false" style="border-radius:8px" :bodyStyle="{ padding: '20px' }">
      <div class="card_title" style="margin-bottom:11px;">
        做营销图
      </div>
      <div class="widgepic">
        <div class="widgepic_main">
          <el-row
            :gutter="24"
            justify="space-between"
            style="margin-left: 0px;margin-right: 0px;width:100%;height:100%"
          >
            <el-col
              :span="8"
              style="padding-left:0px;padding-right:0px;height:100%"
            >
              <!-- 左侧上传/展示 -->
              <div class="main_box" :style="{ height: cardheight + 'px' }">
                <!-- 营销推广图 -->
                <div v-show="leftshow === 1">
                  <div class="show_top1">
                    <div class="uploadradio">
                      <el-radio-group
                        v-model="uploadradio"
                        @change="uplradchange"
                      >
                        <el-radio :label="1">
                          <div>
                            <div class="pic1"></div>
                          </div>
                        </el-radio>
                        <el-radio :label="2">
                          <div>
                            <div class="pic2"></div>
                          </div>
                        </el-radio>
                        <el-radio :label="3">
                          <div>
                            <div class="pic3"></div>
                          </div>
                        </el-radio>
                        <el-radio :label="4" style="margin-right: 0px">
                          <div>
                            <div class="pic4"></div>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <!-- 渲染dom -->
                  <div class="canvas_box">
                    <div id="mycanvas" class="mycanvas" ref="mycanvas">
                      <div v-if="uploadradio === 1" class="uploadradio1">
                        <div class="uploadone" @mouseenter="enterdiv('imgone')">
                          <div v-if="imgone === ''" style="width:100%;height:100%">
                            <el-upload
                              style="width:272px;height:272px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div class="display">
                          <div class="uploadtwo" @mouseenter="enterdiv('imgtwo')">
                            <div
                              v-if="imgtwo === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:136px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess2"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:136px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgtwo"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(2)"></i>
                            </div>
                          </div>
                          <div
                            class="uploadtwo"
                            @mouseenter="enterdiv('imgthree')"
                          >
                            <div
                              v-if="imgthree === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:136px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess3"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:136px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgthree"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(3)"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="uploadradio === 2" class="uploadradio1">
                        <div class="display">
                          <div
                            class="uploadthree"
                            @mouseenter="enterdiv('imgone')"
                          >
                            <div
                              v-if="imgone === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:167px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess1"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgone"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(1)"></i>
                            </div>
                          </div>
                          <div
                            class="uploadthree"
                            @mouseenter="enterdiv('imgtwo')"
                          >
                            <div
                              v-if="imgtwo === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:167px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess2"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgtwo"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(2)"></i>
                            </div>
                          </div>
                        </div>
                        <div class="display">
                          <div
                            class="uploadthree"
                            @mouseenter="enterdiv('imgthree')"
                          >
                            <div
                              v-if="imgthree === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:167px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess3"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgthree"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(3)"></i>
                            </div>
                          </div>
                          <div
                            class="uploadfour"
                            @mouseenter="enterdiv('imgfour')"
                          >
                            <div
                              v-if="imgfour === ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:136px;height:167px;margin:0 auto"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess4"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                                >
                                  <div style="font-size:35px;color:blue;">
                                    <i class="el-icon-plus avatar-uploader-icon">
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgfour"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(4)"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="uploadradio === 3" class="uploadradio1">
                        <div class="uploadone" @mouseenter="enterdiv('imgone')">
                          <div v-if="imgone === ''" style="width:100%;height:100%">
                            <el-upload
                              style="width:272px;height:272px;margin:0 auto;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div class="uploadone" @mouseenter="enterdiv('imgtwo')">
                          <div v-if="imgtwo === ''" style="width:100%;height:100%">
                            <el-upload
                              style="width:272px;height:272px;margin:0 auto;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                      </div>
                      <div v-if="uploadradio === 4" class="uploadradio1">
                        <div class="uploadone" @mouseenter="enterdiv('imgone')">
                          <div v-if="imgone === ''" style="width:100%;height:100%">
                            <el-upload
                              style="width:272px;height:272px;margin:0 auto;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                      </div>
                      <!-- 定位活动标签 -->
                      <!-- @mousemove="movechange($event)" -->
                      <div
                        ref="showtabs"
                        class="show_tabs"
                        :style="{
                          top: potop,
                          left: poleft
                        }"
                        @mousedown="movedown($event)"
                      >
                        <!-- 长标签 -->
                        <div
                          v-if="graphradio === 1&&long === 1"
                          class="show_img"
                          :style="{
                            backgroundImage: 'url(' + graphBgImg + ')'
                          }"
                        >
                          <p
                            class="show_title"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <div class="show_info">
                            <p
                              :style="{
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2
                              }"
                            >
                              {{ title2 }}
                            </p>
                            <div
                              :style="{
                                color: title_color3,
                                fontSize: title_size3 + 'px',
                                fontFamily: title_famiy3,
                                borderTop: title_border3
                              }"
                            >
                              {{ title3 }}
                            </div>
                          </div>
                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                        <div
                          v-if="graphradio === 1&&long === 2"
                          class="show_imgs"
                        >
                          <div>
                            <div
                              class="show_imgs"
                              :style="{
                                backgroundImage: 'url(' + graphBgImg2 + ')'
                              }"
                            >
                              <p
                                class="show_title2"
                                :style="{
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2,
                                  fontWeight:600
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <p
                                class="show_title"
                                :style="{
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <div
                                class="show_title3"
                                :style="{
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  fontWeight:600
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                        <!-- 圆标签 -->
                        <div
                          v-if="graphradio === 2"
                          class="show_img2 active"
                          :style="{
                            backgroundImage: 'url(' + graphBgImg + ')'
                          }"
                        >
                          <p
                            class="show_title sh1"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <p
                            class="show_title "
                            :style="{
                              color: title_color2,
                              fontSize: title_size2 + 'px',
                              fontFamily: title_famiy2,
                              fontWeight: 700
                            }"
                          >
                            {{ title2 }}
                          </p>
                          <div
                            class="show_title"
                            :style="{
                              color: title_color3,
                              fontSize: title_size3 + 'px',
                              fontFamily: title_famiy3,
                              borderTop: title_border3
                            }"
                          >
                            {{ title3 }}
                          </div>

                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                        <!-- 小标签 -->
                        <div v-if="graphradio === 3">
                          <div v-if="smallLabel === 1" class="iconfont_box">
                            <i
                              class="iconfont icon-tb_halfround icon_i"
                              :style="{
                                color: icfontcolor,
                                fontSize: '40px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh2"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <div v-if="smallLabel === 2" class="iconfont_box">
                            <i
                              class="iconfont icon-tb_halfround icon_i"
                              :style="{
                                transform: 'rotateY(180deg)',
                                color: icfontcolor,
                                fontSize: '40px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh2"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <div
                            v-if="smallLabel === 3"
                            class="iconfont_box"
                            style="overflow:hidden"
                          >
                            <i
                              class="iconfont icon-tb_rightround icon_i"
                              :style="{
                                color: icfontcolor,
                                fontSize: '41px',
                                left: '-14px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh2"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <div
                            v-if="smallLabel === 4"
                            class="iconfont_box"
                            style="overflow:hidden"
                          >
                            <i
                              class="iconfont icon-tb_rightround icon_i"
                              :style="{
                                transform: 'rotateY(180deg)',
                                color: icfontcolor,
                                fontSize: '41px',
                                left: '0px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh2"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <div
                            v-if="smallLabel === 5"
                            class="iconfont_box"
                            style="width: 150px;height: 38px;overflow:hidden"
                          >
                            <i
                              class="iconfont icon-tb_topred icon_i"
                              :style="{
                                color: icfontcolor,
                                fontSize: '150px',
                                top: '-91px',
                                left: '0px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh2"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1,
                                lineHeight: '38px'
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <div
                            v-if="smallLabel === 6"
                            class="iconfont_box"
                            style="width: 70px;height: 86px;overflow：didden"
                          >
                            <i
                              class="iconfont icon-tb_fire icon_i"
                              :style="{
                                color: icfontcolor,
                                fontSize: '85px',
                                top: '-19px',
                                left: '-7px'
                              }"
                            ></i>
                            <!-- 文字一 -->
                            <p
                              class="sh3"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                          </div>
                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                        <!-- 实拍图标签 -->
                        <div v-if="graphradio === 4">
                          <div
                            class="bg_box"
                            :style="{
                              width: '120px',
                              height: '120px',
                              border: '4px solid ' + bordercolor
                            }"
                          >
                            <!-- 文字一 -->
                            <p
                              class="bg_title"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <i
                              class="bg_h"
                              :style="{
                                borderTop: '1px dashed ' + bordercolor
                              }"
                            ></i>
                            <i
                              class="bg_s"
                              :style="{
                                borderLeft: '1px dashed ' + bordercolor
                              }"
                            ></i>
                          </div>
                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                        <!-- 聚划算 -->
                        <div v-if="graphradio === 5">
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <div
                              class="show_info"
                              style="width: 100px;height: auto;justify-content: flex-end;"
                            >
                              <p
                                :style="{
                                  textAlign: 'right',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  lineHeight: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 5px;"
                                @click="closediv"
                              ></i>
                            </div>
                          </div>
                        </div>
                        <!-- 淘抢购 -->
                        <div v-if="graphradio === 6">
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <div
                              class="show_info"
                              style="width: 100px;height: auto;justify-content: flex-end;"
                            >
                              <p
                                :style="{
                                  textAlign: 'right',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  lineHeight: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 5px;"
                                @click="closediv"
                              ></i>
                            </div>
                          </div>
                        </div>
                        <!-- 品牌自定 -->
                        <div v-if="graphradio === 7">
                          <div style="width: 320px;margin: 0 auto;">
                            <div
                              class="show_img"
                              :style="{
                                height: '57px',
                                backgroundImage: 'url(' + graphBgImg + ')',
                                backgroundRepeat: 'no-repeat',
                                backgroundSize: '100% 100%'
                              }"
                            >
                              <div
                                class="show_info"
                                style="width: 100px;left: 0px;bottom: 1px;text-align:left"
                              >
                                <p
                                  :style="{
                                    textAlign: 'left',
                                    color: title_color2,
                                    fontSize: title_size2 + 'px',
                                    fontFamily: title_famiy2
                                  }"
                                >
                                  {{ title2 }}
                                </p>
                                <div
                                  :style="{
                                    paddingBottom: '0px',
                                    width: '100%',
                                    height: '33px',
                                    lineHeight: '33px',
                                    fontWeight: '400',
                                    paddingRight: '7px',
                                    textAlign: 'right',
                                    color: title_color3,
                                    fontSize: title_size3 + 'px',
                                    fontFamily: title_famiy3,
                                    borderTop: title_border3
                                  }"
                                >
                                  {{ title3 }}
                                </div>
                              </div>
                              <p
                                class="show_title"
                                :style="{
                                  width: '208px',
                                  height: '31px',
                                  right: '0',
                                  left: 'unset',
                                  lineHeight: '31px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <!-- width: '208px',
                                  height: '31px',
                                  lineHeight: '31px', -->
                              <P
                                class="title4"
                                :style="{
                                  color: title_color4,
                                  fontSize: title_size4 + 'px',
                                  fontFamily: title_famiy4
                                }"
                              >
                                {{ title4 }}
                              </P>
                              <i
                                class="el-icon-close"
                                style="top: -10px;"
                                @click="closediv"
                              ></i>
                            </div>
                          </div>
                        </div>
                        <!-- 自定义标签 -->
                        <div v-if="imgfive !== ''">
                          <div
                            class="bg_box2"
                            :style="{
                              width: '120px',
                              height: '120px',
                              borderRadius: '50%',
                              overflow: 'hidden'
                            }"
                          >
                            <div class="img_box">
                              <el-image
                                style="width: 100%; height: 100%; pointer-events: none;"
                                :src="imgfive"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <!-- <i class="el-icon-close" @click="closediv"></i> -->
                            </div>
                          </div>
                          <i class="el-icon-close" @click="closediv"></i>
                        </div>
                      </div>
                    </div>
                    <!-- 导出按钮 -->
                    <div class="flex row_center" style="margin-top:10px">
                      <el-button
                        type="primary"
                        style="width:300px"
                        @click="saveYXImg('mycanvas')"
                      >合 成
                      </el-button
                      >
                    </div>
                  </div>
                </div>
                <!-- 秒杀预告 -->
                <div v-show="leftshow === 2">
                  <!-- 渲染dom -->
                  <div class="canvas_box2">
                    <div id="miaocanvas" class="mycanvas" ref="miaocanvas">
                      <div style="position:relative">
                        <el-carousel
                          style="border-radius: 10px;"
                          indicator-position="none"
                          height="165px"
                          :autoplay="false"
                        >
                          <el-carousel-item
                            v-for="item in miaoimglist"
                            :key="item.url"
                          >
                            <el-image
                              style="width: 100%;"
                              :src="item.url"
                              fit="cover"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <div class="position_box">
                              <p
                                class="show_title"
                                :style="{
                                  fontWeight: '700',
                                  lineHeight: '63px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <p
                                class="show_title"
                                :style="{
                                  lineHeight: '40px',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                            </div>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                      <div class="miaolist">
                        <el-radio-group
                          v-model="miaoradio"
                          @change="miaoradiochange"
                        >
                          <el-radio
                            v-for="(item, index) in miaoList"
                            :label="index"
                            :key="index"
                          >
                            <div class="miao_main">
                              <div
                                class="miao_img"
                                :style="{
                                  height: '190px',
                                  backgroundImage: item.isblue
                                    ? 'url(' + bgurlblue + ')'
                                    : 'url(' + bgurlorange + ')',
                                  backgroundRepeat: 'no-repeat',
                                  backgroundSize: '100% 100%'
                                }"
                              >
                                <div
                                  class="miao_uploadone"
                                  @mouseenter="enterdiv(6, index)"
                                >
                                  <div
                                    v-if="item.imgurl === ''"
                                    style="width:170px;height:170px;border-radius:8px;"
                                  >
                                    <el-upload
                                      style="width:170px;height:170px;margin:0 auto;background-color:#fff;border-radius:12px"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="
                                        (res, file, fileList, val) => {
                                          uploadSuccess6(
                                            res,
                                            file,
                                            fileList,
                                            index
                                          );
                                        }
                                      "
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:170px;"
                                      >
                                        <div style="font-size:35px;color:blue;">
                                          <div style="font-size:14px">
                                            点击上传图片{{ index + 1 }}
                                          </div>
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width:170px;height:170px;border-radius:8px;"
                                      :src="item.imgurl"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i
                                      class="el-icon-close"
                                      @click="closeimg(6, index)"
                                    ></i>
                                  </div>
                                </div>
                                <div class="rigtitle">
                                  <div class="toptie">
                                    <p
                                      class="show_title"
                                      :style="{
                                        color: item.font[0].title_color1,
                                        fontSize: item.font[0].title_size1 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title1 }}
                                    </p>
                                    <div v-if="composingstyle === 1">
                                      <p
                                        class="show_title"
                                        :style="{
                                          padding: '10px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color2,
                                          fontSize:
                                            item.font[0].title_size2 + 'px'
                                        }"
                                      >
                                        原价:{{ item.font[0].title2 }}
                                      </p>
                                      <p
                                        class="show_title"
                                        :style="{
                                          padding: '10px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        卷后价: {{ item.font[0].title3 }}
                                      </p>
                                    </div>
                                    <div v-else style="height:72px">
                                      <span
                                        :style="{
                                          padding: '10px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        卷后: {{ item.font[0].title3 }}
                                      </span>
                                      <span
                                        :style="{
                                          textDecoration: 'line-through',
                                          padding: '10px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color2,
                                          fontSize:
                                            item.font[0].title_size2 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title2 }}
                                      </span>
                                    </div>
                                    <p
                                      class="show_title"
                                      :style="{
                                        borderRadius: '4px 10px 10px 4px',
                                        height: '30px',
                                        lineHeight: '30px',
                                        backgroundImage: item.isblue
                                          ? 'linear-gradient(to right,#5770d4 0,#3a8ed6 50%,#26a2d7 100%)'
                                          : 'linear-gradient(to right,#fe8854 0,#ffba19 50%,#ffcf01 100%)',
                                        margin: '10px 0',
                                        textAlign: 'left',
                                        color: item.font[0].title_color4,
                                        fontSize: item.font[0].title_size4 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title4 }}
                                    </p>
                                  </div>
                                </div>
                                <div
                                  :style="{
                                    width: '44px',
                                    height: '33px',
                                    lineHeight: '33px',
                                    top: 0,
                                    left: 0,
                                    position: 'absolute',
                                    backgroundImage: item.isblue
                                      ? 'url(' + iconurlblue + ')'
                                      : 'url(' + iconurlorange + ')',
                                    backgroundRepeat: 'no-repeat'
                                  }"
                                >
                                  <!-- backgroundSize: '100% 100%' -->
                                  <div
                                    style="color:white;line-height:33px;text-align:center"
                                  >
                                    {{ index &lt; 10 ? '0' + (index+1) : index }}
                                  </div>
                                </div>
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 11px;"
                                @click="colsemiaolist"
                              ></i>
                            </div>
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <!-- 新增按钮 -->
                    <div class="flex row_center" style="margin-top:10px">
                      <el-button
                        type="primary"
                        style="width:300px;"
                        @click="doaddlist"
                      >添 加
                      </el-button
                      >
                    </div>
                  </div>
                </div>
                <!-- 爆款汇总 -->
                <div v-show="leftshow === 3">
                  <!-- 渲染dom -->
                  <div class="canvas_box3">
                    <div id="baocanvas" class="mycanvas" ref="baocanvas">
                      <div class="top_bg">
                        <div class="position_box">
                          <p
                            class="show_title"
                            :style="{
                              fontWeight: '700',
                              lineHeight: '63px',
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <p
                            class="show_title"
                            :style="{
                              lineHeight: '40px',
                              color: title_color2,
                              fontSize: title_size2 + 'px',
                              fontFamily: title_famiy2
                            }"
                          >
                            {{ title2 }}
                          </p>
                        </div>
                      </div>
                      <div class="miaolist">
                        <el-radio-group
                          v-model="baoradio"
                          @change="baoradiochange"
                        >
                          <el-radio
                            v-for="(item, index) in baoList"
                            :label="index"
                            :key="index"
                          >
                            <div class="miao_main">
                              <div
                                class="miao_img"
                                :style="{
                                  height: '190px',
                                  backgroundImage:
                                    item.status === 1
                                      ? 'url(' + baourlblue + ')'
                                      : item.status === 2
                                        ? 'url(' + baourlpurple + ')'
                                        : item.status === 3
                                          ? 'url(' + baourlred + ')'
                                          : 'url(' + baourlorange + ')',
                                  backgroundRepeat: 'no-repeat',
                                  backgroundSize: '100% 100%'
                                }"
                              >
                                <div
                                  class="miao_uploadone"
                                  @mouseenter="enterdiv(7, index)"
                                >
                                  <div
                                    v-if="item.imgurl === ''"
                                    style="width:170px;height:170px;border-radius:8px;"
                                  >
                                    <el-upload
                                      style="width:170px;height:170px;margin:0 auto;background-color:#fff;border-radius:12px"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="
                                        (res, file, fileList, val) => {
                                          uploadSuccess7(
                                            res,
                                            file,
                                            fileList,
                                            index
                                          );
                                        }
                                      "
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:170px;background-color:#fff;border-radius:12px"
                                      >
                                        <div style="font-size:35px;color:blue;">
                                          <div style="font-size:14px">
                                            点击上传图片{{ index + 1 }}
                                          </div>
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width:170px;height:170px;border-radius:8px;"
                                      :src="item.imgurl"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i
                                      class="el-icon-close"
                                      @click="closeimg(7, index)"
                                    ></i>
                                  </div>
                                </div>
                                <div class="rigtitle">
                                  <div class="toptie">
                                    <p
                                      class="show_title"
                                      :style="{
                                        color: item.font[0].title_color1,
                                        fontSize: item.font[0].title_size1 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title1 }}
                                    </p>
                                    <p
                                      :style="{
                                        width: '100%',
                                        overflow: 'hidden',
                                        height: '64px',
                                        paddingTop: '10px',
                                        textAlign: 'left',
                                        whiteSpace: 'initial',
                                        color: item.font[0].title_color2,
                                        fontSize: item.font[0].title_size2 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title2 }}
                                    </p>
                                    <div class="issue_box">
                                      <p
                                        class="show_title"
                                        :style="{
                                          width: '70px',
                                          height: '50px',
                                          lineHeight: '58px',
                                          textAlign: 'center',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title3 }}
                                      </p>

                                      <p
                                        class="show_title"
                                        :style="{
                                          width: '40px',
                                          overflow: 'hidden',
                                          height: '30px',
                                          lineHeight: '21px',
                                          textAlign: 'center',
                                          color: item.font[0].title_color4,
                                          fontSize:
                                            item.font[0].title_size4 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title4 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  :style="{
                                    width: '56px',
                                    height: '50px',
                                    top: '-9px',
                                    left: 0,
                                    position: 'absolute',
                                    backgroundImage: 'url(' + baoicon + ')',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundSize: '100% 100%'
                                  }"
                                >
                                  <div
                                    style="color:white;line-height:46px;text-align:center;font-size:23px;font-weight:700"
                                  >
                                    {{ index &lt; 10 ? '0' + (index+1) : index }}
                                  </div>
                                </div>
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 11px;"
                                @click="colsebaolist"
                              ></i>
                            </div>
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <!-- 新增按钮 -->
                    <div class="flex row_center" style="margin-top:10px">
                      <el-button
                        type="primary"
                        style="width:300px"
                        @click="addbaolist"
                      >添 加
                      </el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <!-- 中间设置控制台 -->
            <el-col :span="9">
              <div class="main_box" :style="{ height: cardheight + 'px' }">
                <div class="main_top flex row_center">
                  <el-radio-group v-model="leftshow" @change="setchange">
                    <el-radio-button :label="1">营销推广图</el-radio-button>
                    <el-radio-button :label="2">秒杀预告</el-radio-button>
                    <el-radio-button :label="3">爆款汇总</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="main_content flex row_center">
                  <div v-show="leftshow === 1">
                    <div class="graph_box flex row_center">
                      <el-radio-group v-model="graphradio" @change="graphchange">
                        <el-radio
                          v-for="itme in graphList"
                          :key="itme.id"
                          :label="itme.id"
                        >
                          <span style="display:inline-block;width:55px">
                            {{ itme.name }}
                          </span>
                        </el-radio>
                      </el-radio-group>
                    </div>
                    <div class="setgraph_box">
                      <!-- 长标签 -->
                      <div v-if="graphradio === 1">
                        <div class="top_img" @click="showtabsdiv(1)">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div
                              class="show_img"
                              :style="{
                                backgroundImage: 'url(' + graphBgImg + ')'
                              }"
                            >
                              <p
                                class="show_title"
                                :style="{
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <div class="show_info">
                                <p
                                  :style="{
                                    color: title_color2,
                                    fontSize: title_size2 + 'px',
                                    fontFamily: title_famiy2
                                  }"
                                >
                                  {{ title2 }}
                                </p>
                                <div
                                  :style="{
                                    color: title_color3,
                                    fontSize: title_size3 + 'px',
                                    fontFamily: title_famiy3,
                                    borderTop: title_border3
                                  }"
                                >
                                  {{ title3 }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="top_imgs" @click="showtabsdiv(2)">
                          <div
                            style="width: 320px;margin: 22px auto 0;padding-top: 22px;"
                          >
                            <div
                              class="show_imgs"
                              :style="{
                                backgroundImage: 'url(' + graphBgImg2 + ')'
                              }"
                            >
                              <p
                                class="show_title2"
                                :style="{
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2,
                                  fontWeight:600
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <p
                                class="show_title"
                                :style="{
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1,
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <div
                                class="show_title3"
                                :style="{
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  fontWeight:600
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <div v-if="long===1">
                            <!-- 风格 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >风格</span
                              >
                              <el-select
                                v-model="styleradio"
                                placeholder="请选择风格"
                                @change="stylechange"
                              >
                                <el-option
                                  v-for="item in styleList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字一 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字一</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size1" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color1"
                              ></el-color-picker>
                              <el-select v-model="title_famiy1" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字二 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字二</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size2" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color2"
                              ></el-color-picker>
                              <el-select v-model="title_famiy2" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字三 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size3" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color3"
                              ></el-color-picker>
                              <el-select v-model="title_famiy3" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                          <div v-if="long===2">
                            <!-- 文字一 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字一</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size1" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color1"
                              ></el-color-picker>
                              <el-select v-model="title_famiy1" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字二 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字二</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size2" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color2"
                              ></el-color-picker>
                              <el-select v-model="title_famiy2" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字三 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:120px"
                                v-model="title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size3" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color3"
                              ></el-color-picker>
                              <el-select v-model="title_famiy3" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 圆标签 -->
                      <div v-if="graphradio === 2">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div
                              class="show_img2"
                              :style="{
                                backgroundImage: 'url(' + graphBgImg + ')'
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="show_title sh1"
                                :style="{
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <!-- 文字二 -->
                              <p
                                class="show_title"
                                :style="{
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2,
                                  fontWeight: 700
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <!-- 文字三 -->
                              <div
                                class="show_title"
                                :style="{
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <!-- 风格 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >风格</span
                            >
                            <el-select
                              v-model="styleradio"
                              placeholder="请选择风格"
                              @change="stylechange"
                            >
                              <el-option
                                v-for="item in styleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字二 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字二</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size2" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color2"
                            ></el-color-picker>
                            <el-select v-model="title_famiy2" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字三 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字三</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size3" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color3"
                            ></el-color-picker>
                            <el-select v-model="title_famiy3" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                      <!-- 小标签 -->
                      <div v-if="graphradio === 3">
                        <div class="graph3_box">
                          <!-- 一 -->
                          <el-radio-group v-model="smallLabel">
                            <el-radio :label="1" class="test">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div class="iconfont_box">
                                  <i
                                    class="iconfont icon-tb_halfround icon_i"
                                    :style="{
                                      color: icfontcolor,
                                      fontSize: '40px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh2"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                            <el-radio :label="2">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div class="iconfont_box">
                                  <i
                                    class="iconfont icon-tb_halfround icon_i"
                                    :style="{
                                      transform: 'rotateY(180deg)',
                                      color: icfontcolor,
                                      fontSize: '40px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh2"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                            <el-radio :label="3">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div class="iconfont_box" style="overflow:hidden">
                                  <i
                                    class="iconfont icon-tb_rightround icon_i"
                                    :style="{
                                      color: icfontcolor,
                                      fontSize: '41px',
                                      left: '-14px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh2"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                            <el-radio :label="4">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div class="iconfont_box" style="overflow:hidden">
                                  <i
                                    class="iconfont icon-tb_rightround icon_i"
                                    :style="{
                                      transform: 'rotateY(180deg)',
                                      color: icfontcolor,
                                      fontSize: '41px',
                                      left: '0px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh2"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                            <el-radio :label="5">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div
                                  class="iconfont_box"
                                  style="width: 150px;height: 38px;"
                                >
                                  <i
                                    class="iconfont icon-tb_topred icon_i"
                                    :style="{
                                      color: icfontcolor,
                                      fontSize: '150px',
                                      top: '-55px',
                                      left: '0px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh2"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1,
                                      lineHeight: '38px'
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                            <el-radio :label="6">
                              <div class="top_img graph3" @click="showtabsdiv">
                                <div
                                  class="iconfont_box"
                                  style="width: 70px;height: 86px;overflow：didden"
                                >
                                  <i
                                    class="iconfont icon-tb_fire icon_i"
                                    :style="{
                                      color: icfontcolor,
                                      fontSize: '85px',
                                      top: '1px',
                                      left: '-7px'
                                    }"
                                  ></i>
                                  <!-- 文字一 -->
                                  <p
                                    class="sh3"
                                    :style="{
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                </div>
                              </div>
                            </el-radio>
                          </el-radio-group>
                        </div>
                        <div class="set_box">
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 背景颜色 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >背景颜色</span
                            >
                            <el-color-picker
                              v-model="icfontcolor"
                            ></el-color-picker>
                          </div>
                        </div>
                      </div>
                      <!-- 实拍图标签 -->
                      <div v-if="graphradio === 4">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 130px;margin: 0 auto;"
                          >
                            <div
                              class="bg_box"
                              :style="{
                                border: '4px solid ' + bordercolor
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="bg_title"
                                :style="{
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <i
                                class="bg_h"
                                :style="{
                                  borderTop: '1px dashed ' + bordercolor
                                }"
                              ></i>
                              <i
                                class="bg_s"
                                :style="{
                                  borderLeft: '1px dashed ' + bordercolor
                                }"
                              ></i>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 背景颜色 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >边框颜色</span
                            >
                            <el-color-picker
                              v-model="bordercolor"
                            ></el-color-picker>
                          </div>
                        </div>
                      </div>
                      <!-- 聚划算 -->
                      <div v-if="graphradio === 5">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div
                              class="show_img"
                              :style="{
                                height: '57px',
                                backgroundImage: 'url(' + graphBgImg + ')'
                              }"
                            >
                              <p
                                class="show_title"
                                :style="{
                                  width: '208px',
                                  height: '31px',
                                  lineHeight: '31px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <div
                                class="show_info"
                                style="width: 100px;height: auto;justify-content: flex-end;"
                              >
                                <p
                                  :style="{
                                    textAlign: 'right',
                                    color: title_color2,
                                    fontSize: title_size2 + 'px',
                                    fontFamily: title_famiy2
                                  }"
                                >
                                  {{ title2 }}
                                </p>
                                <div
                                  :style="{
                                    paddingBottom: '0px',
                                    width: '100%',
                                    height: '33px',
                                    lineHeight: '33px',
                                    fontWeight: '400',
                                    paddingRight: '7px',
                                    textAlign: 'right',
                                    color: title_color3,
                                    fontSize: title_size3 + 'px',
                                    fontFamily: title_famiy3,
                                    borderTop: title_border3
                                  }"
                                >
                                  {{ title3 }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <!-- 风格 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >风格</span
                            >
                            <el-select
                              v-model="styleradio"
                              placeholder="请选择风格"
                              @change="stylechange"
                            >
                              <el-option
                                v-for="item in styleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字二 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字二</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size2" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color2"
                            ></el-color-picker>
                            <el-select v-model="title_famiy2" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字三 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字三</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size3" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color3"
                            ></el-color-picker>
                            <el-select v-model="title_famiy3" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                      <!-- 淘抢购 -->
                      <div v-if="graphradio === 6">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div
                              class="show_img"
                              :style="{
                                height: '57px',
                                backgroundImage: 'url(' + graphBgImg + ')'
                              }"
                            >
                              <p
                                class="show_title"
                                :style="{
                                  width: '208px',
                                  height: '31px',
                                  lineHeight: '31px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <div
                                class="show_info"
                                style="width: 100px;height: auto;justify-content: flex-end;"
                              >
                                <p
                                  :style="{
                                    textAlign: 'right',
                                    color: title_color2,
                                    fontSize: title_size2 + 'px',
                                    fontFamily: title_famiy2
                                  }"
                                >
                                  {{ title2 }}
                                </p>
                                <div
                                  :style="{
                                    paddingBottom: '0px',
                                    width: '100%',
                                    height: '33px',
                                    lineHeight: '33px',
                                    fontWeight: '400',
                                    paddingRight: '7px',
                                    textAlign: 'right',
                                    color: title_color3,
                                    fontSize: title_size3 + 'px',
                                    fontFamily: title_famiy3,
                                    borderTop: title_border3
                                  }"
                                >
                                  {{ title3 }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <!-- 风格 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >风格</span
                            >
                            <el-select
                              v-model="styleradio"
                              placeholder="请选择风格"
                              @change="stylechange"
                            >
                              <el-option
                                v-for="item in styleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字二 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字二</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size2" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color2"
                            ></el-color-picker>
                            <el-select v-model="title_famiy2" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字三 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字三</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size3" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color3"
                            ></el-color-picker>
                            <el-select v-model="title_famiy3" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                      <!-- 品牌自定 -->
                      <div v-if="graphradio === 7">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div
                              class="show_img"
                              :style="{
                                height: '57px',
                                backgroundImage: 'url(' + graphBgImg + ')',
                                backgroundRepeat: 'no-repeat',
                                backgroundSize: '100% 100%'
                              }"
                            >
                              <div
                                class="show_info"
                                style="width: 100px;left: 0px;bottom: 1px;text-align:left"
                              >
                                <p
                                  :style="{
                                    textAlign: 'left',
                                    color: title_color2,
                                    fontSize: title_size2 + 'px',
                                    fontFamily: title_famiy2
                                  }"
                                >
                                  {{ title2 }}
                                </p>
                                <div
                                  :style="{
                                    paddingBottom: '0px',
                                    width: '100%',
                                    height: '33px',
                                    lineHeight: '33px',
                                    fontWeight: '400',
                                    paddingRight: '7px',
                                    textAlign: 'right',
                                    color: title_color3,
                                    fontSize: title_size3 + 'px',
                                    fontFamily: title_famiy3,
                                    borderTop: title_border3
                                  }"
                                >
                                  {{ title3 }}
                                </div>
                              </div>
                              <p
                                class="show_title"
                                :style="{
                                  width: '208px',
                                  height: '31px',
                                  right: '0',
                                  left: 'unset',
                                  lineHeight: '31px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <!-- width: '208px',
                                  height: '31px',
                                  lineHeight: '31px', -->
                              <P
                                class="title4"
                                :style="{
                                  color: title_color4,
                                  fontSize: title_size4 + 'px',
                                  fontFamily: title_famiy4
                                }"
                              >
                                {{ title4 }}
                              </P>
                            </div>
                          </div>
                        </div>
                        <div class="set_box">
                          <!-- 风格 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >风格</span
                            >
                            <el-select
                              v-model="styleradio"
                              placeholder="请选择风格"
                              @change="stylechange"
                            >
                              <el-option
                                v-for="item in styleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字一 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字一</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size1" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color1"
                            ></el-color-picker>
                            <el-select v-model="title_famiy1" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字二 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字二</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size2" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color2"
                            ></el-color-picker>
                            <el-select v-model="title_famiy2" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字三 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字三</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size3" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color3"
                            ></el-color-picker>
                            <el-select v-model="title_famiy3" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                          <!-- 文字四 -->
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:60px;font-size:14px"
                            >文字四</span
                            >
                            <el-input
                              style="width:120px"
                              v-model="title4"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select v-model="title_size4" style="width:70px">
                              <el-option
                                v-for="item in sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="title_color4"
                            ></el-color-picker>
                            <el-select v-model="title_famiy3" style="width:120px">
                              <el-option
                                v-for="item in famiyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                      <!-- 自定义标签 -->
                      <div v-if="graphradio === 8">
                        <div class="top_img" @click="showtabsdiv">
                          <div
                            style="padding-top: 22px;width: 320px;margin: 0 auto;"
                          >
                            <div class="uploadfive">
                              <div
                                v-if="imgfive === ''"
                                style="width:100%;height:100%"
                              >
                                <el-upload
                                  style="width:140px;height:140px;margin:0 auto;background-color:#fff;border-radius:12px"
                                  class="avatar-uploader"
                                  :action="uploadaction"
                                  :on-success="uploadSuccess5"
                                  :on-error="uploadError"
                                  :limit="1"
                                  :multiple="false"
                                  :show-file-list="false"
                                  :before-upload="beforeAvatarUpload"
                                >
                                  <div
                                    style="width:100%;height:100%;line-height:140px;"
                                  >
                                    <div style="font-size:26px;color:blue;">
                                      <i
                                        class="el-icon-plus avatar-uploader-icon"
                                      >
                                        <div style="font-size:14px">
                                          点击上传图片
                                        </div>
                                      </i>
                                    </div>
                                  </div>
                                </el-upload>
                              </div>
                              <div v-else class="img_box">
                                <el-image
                                  style="width: 100%; height: 100%"
                                  :src="imgfive"
                                  fit="fill"
                                  crossOrigin="Anonymous"
                                ></el-image>
                                <i class="el-icon-close" @click="closeimg(5)"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-show="leftshow === 2">
                    <div>
                      <div class="set_box">
                        <!-- 主题风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >主题风格</span
                          >
                          <el-select
                            v-model="stylechoose"
                            placeholder="请选择主题风格"
                            @change="stylechoosechange"
                          >
                            <el-option
                              v-for="item in stylechooseList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 排版风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >排版风格</span
                          >
                          <el-select
                            v-model="composingstyle"
                            placeholder="请选择排版风格"
                            @change="composingstylechange"
                          >
                            <el-option
                              v-for="item in composingstyleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >文字一</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >文字二</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字三-六 -->
                        <div v-if="miaoList.length > 0">
                          <div
                            class="miao00"
                            v-for="(item, index) in miaoList[miaoradio].font"
                            :key="index"
                          >
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text1 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size1"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color1"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text2 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size2"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color2"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text3 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size3"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color3"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text4 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title4"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size4"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color4"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="main_btn">
                      <div style="margin:20px 0;width:100%;margin-right:20px">
                        <!-- 导出按钮 -->
                        <div style="display: none;">
                          <input
                            type="file"
                            name="upload"
                            id="upload"
                            style="display: none;"
                          />
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveAsImg('miaocanvas')"
                        >合 成
                        </el-button
                        >
                        <el-button
                          type="primary"
                          size="small"
                          @click="handleOk()"
                        >复制
                        </el-button
                        >
                        <a
                          download="营销图"
                          :href="saveurl"
                          style="width:100%;height:100%;margin-left:10px"
                        >
                          <el-button type="primary" size="small">
                            保存
                          </el-button>
                        </a>
                      </div>
                      <div style="margin: 10px 20px 0 0;">
                        <!-- style="width: 150px; height: 300px" -->
                        <el-image
                          id="miaoimg"
                          v-if="dourl !== ''"
                          :src="dourl"
                          fit="cover"
                        ></el-image>
                      </div>
                    </div>
                  </div>
                  <div v-show="leftshow === 3">
                    <div>
                      <div class="set_box">
                        <!-- 主题风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >主题风格</span
                          >
                          <el-select
                            v-model="baostyle"
                            placeholder="请选择主题风格"
                            @change="baostylechange"
                          >
                            <el-option
                              v-for="item in baostyleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >文字一</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:60px;font-size:14px"
                          >文字二</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字三-六 -->
                        <div v-if="baoList.length > 0">
                          <div
                            class="miao00"
                            v-for="(item, index) in baoList[baoradio].font"
                            :key="index"
                          >
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text1 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size1"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color1"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text2 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size2"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color2"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text3 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size3"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color3"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:60px;font-size:14px"
                              >{{ item.text4 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title4"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size4"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color4"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="main_btn">
                      <div style="margin:20px 0;width:100%;margin-right:20px">
                        <!-- 导出按钮 -->
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveAsImg('baocanvas')"
                        >合 成
                        </el-button
                        >
                        <el-button
                          type="primary"
                          size="small"
                          @click="handleOk()"
                        >复制
                        </el-button
                        >
                        <a
                          download="营销图"
                          :href="saveurl"
                          style="width:100%;height:100%;margin-left:10px"
                        >
                          <el-button type="primary" size="small">
                            保存
                          </el-button>
                        </a>
                      </div>
                      <div>
                        <!-- style="width: 150px; height: 300px" -->
                        <el-image
                          id="baoimg"
                          v-if="dourl !== ''"
                          :src="dourl"
                          fit="cover"
                        ></el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col
              :span="7"
              style="padding-left:0px;padding-right:0px;height:100%"
            >
              <!-- 右侧获取图片 -->
              <div class="main_box" :style="{ height: cardheight + 'px' }">
                <div class="main_box3">
                  <div class="display2" style="margin-top:20px;">
                    <el-input
                      placeholder="请输入商品链接获取图片"
                      v-model="goodsurl"
                      clearable
                    >
                    </el-input>
                    <el-button type="primary" @click="dosearch">获取</el-button>
                  </div>
                  <div style="margin:10px 0">
                    <div class="display2">
                      <div class="display" style="padding:8px 0;">
                        <span class="leftline"></span>
                        <span class="lefttitle">淘宝主图</span>
                      </div>
                      <div class="rightinfo">
                        请拖拽到左边需要合成的盒子里
                      </div>
                    </div>
                    <div class="mainimg_box" v-if="mainimgList.length > 0">
                      <div
                        class="tbmainimg"
                        v-for="(item, index) in mainimgList"
                        :key="index"
                      >
                        <el-image
                          @mousedown="isdown = true"
                          @mouseup="isdown = false"
                          @mouseleave="leaveimg"
                          style="width: 100px; height: 100px"
                          :src="item"
                          fit="cover"
                          :preview-src-list="mainimgList"
                        ></el-image>
                      </div>
                    </div>
                    <div v-else class="mainimg_box">
                      <span v-for="i in 3" :key="i" class="mian_span"></span>
                    </div>
                  </div>
                  <div style="margin:10px 0">
                    <div class="display2">
                      <div class="display" style="padding:8px 0;">
                        <span class="leftline"></span>
                        <span class="lefttitle">营销图</span>
                      </div>
                      <!-- <div class="rightinfo">
                      请拖拽到左边需要合成的盒子里
                    </div> -->
                    </div>
                    <div class="mainimg_box" v-if="yximgList.length > 0">
                      <div
                        class="tbmainimg"
                        v-for="(item, index) in yximgList"
                        :key="index"
                      >
                        <el-image
                          @mousedown="isdown = true"
                          @mouseup="isdown = false"
                          @mouseleave="leaveimg"
                          style="width: 100px; height: 100px"
                          :src="item"
                          fit="cover"
                          :preview-src-list="yximgList"
                        ></el-image>
                      </div>
                    </div>
                    <div v-else class="mainimg_box">
                      <span v-for="i in 3" :key="i" class="mian_span"></span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </a-card>
    <iframe
      class="hidden"
      id="copyFrame"
      ref="copyFrame"
      name="copyFrame"
      frameborder="0"
      scrolling="no"
      src="/static/copy/copy.html"
    ></iframe>
  </div>
</template>

<script>
  import axios from 'axios'
  import { doBaseUpload } from '@/api/enteringApi' // base64上传
  import html2canvas from 'html2canvas'

  export default {
    name: 'Makespreadimg',
    data () {
      return {
        long: 1,
        baoboxheight: 1050,
        miaoboxheight: 680,
        // 全局上传地址
        uploadaction: 'https://app.letuilm.com/api/upload',
        // 右边主图拖动条件
        isdown: false,
        flag: false,
        // 右侧图地址暂存
        moveimg: '',
        // 右侧营销图列表
        yximgList: [
          // "http://img.letuilm.com/2020/06/1d9b042020061717382128336.jpeg",
        ],
        // 右侧主图列表
        mainimgList: [],
        saveurl: '',
        goodsurl: '',
        dourl: '',
        // 三大卡片高度
        cardheight: 680,
        // 爆品汇总固定图片
        baoicon: require('@/assets/images/baotop.png'),
        baourlblue: require('@/assets/images/baoblue.png'),
        baourlorange: require('@/assets/images/baoorange.png'),
        baourlred: require('@/assets/images/baored.png'),
        baourlpurple: require('@/assets/images/baopurple.png'),
        // 爆款渲染列表
        baoList: [
          {
            font: [
              {
                text1: '文字三',
                title1: '[三只松鼠]',
                title_color1: '#ffffff',
                title_size1: '16',

                text2: '文字四',
                title2: '零食大礼包',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '32',

                text4: '文字六',
                title4: '3.20',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            status: 1
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '[三只松鼠]',
                title_color1: '#ffffff',
                title_size1: '16',

                text2: '文字四',
                title2: '零食大礼包',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '32',

                text4: '文字六',
                title4: '3.20',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            status: 2
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '[三只松鼠]',
                title_color1: '#ffffff',
                title_size1: '16',

                text2: '文字四',
                title2: '零食大礼包',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '32',

                text4: '文字六',
                title4: '3.20',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            status: 3
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '[三只松鼠]',
                title_color1: '#ffffff',
                title_size1: '16',

                text2: '文字四',
                title2: '零食大礼包',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '32',

                text4: '文字六',
                title4: '3.20',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            status: 4
          }
        ],
        baoradio: 0, // 爆款列表单选
        // 爆款风格
        baostyle: 1,
        baostyleList: [
          {
            value: 1,
            label: '缤纷_单列1'
          },
          {
            value: 2,
            label: '缤纷_单列2'
          },
          {
            value: 3,
            label: '缤纷_单列3'
          }
        ],
        // 秒杀预告固定图片
        iconurlblue: require('@/assets/images/baoicon_blue.png'),
        iconurlorange: require('@/assets/images/baoicon_orange.png'),
        bgurlblue: require('@/assets/images/listbg_blue.png'),
        bgurlorange: require('@/assets/images/listbg_orange.png'),
        miaoradio: 0, // 秒杀列表单选
        // 秒杀渲染列表
        miaoList: [
          {
            font: [
              {
                text1: '文字三',
                title1: '三只松鼠',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '50.0',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '10.0',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '3月14号 上午10:00',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            isblue: true
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '三只松鼠',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '50.0',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '10.0',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '3月14号 上午10:00',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            isblue: false
          }
        ],
        // 秒杀预告轮播图
        miaoimglist: [
          { url: require('@/assets/images/baobgblue.png') },
          { url: require('@/assets/images/baobgorange.png') },
          { url: require('@/assets/images/baobgred.png') }
        ],
        // 边框颜色
        bordercolor: '#FF0000',
        // 小标签
        smallLabel: 1,
        // iconfont颜色
        icfontcolor: '#FF0000',
        // 定位盒子top
        potop: '53.5%',
        poleft: '0px',
        // 文字6
        title6: '3月14号 上午10:00',
        title_color6: '#ffffff',
        title_size6: '16',
        // 文字5
        title5: '10.0',
        title_color5: '#ffffff',
        title_size5: '16',
        // 文字4
        title4: '三只松鼠',
        title_color4: '#ffffff',
        title_size4: '14',
        title_famiy4: '微软雅黑',
        // 文字3
        title3: '29.9',
        title_color3: '#FF0000',
        title_size3: '20',
        title_famiy3: '微软雅黑',
        title_border3: '1px solid red',
        // 文字2
        title2: '劵后价',
        title_color2: '#FF0000',
        title_size2: '14',
        title_famiy2: '微软雅黑',
        // 文字1
        title1: '下单立减20元',
        title_color1: '#ffffff',
        title_size1: '20',
        title_famiy1: '微软雅黑',
        // 营销推广图背景
        graphBgImg: require('@/assets/images/long_red.png'),
        graphBgImg2: require('@/assets/images/long2.png'),

        graphradio: 1, // 中间标签切换展示控制
        leftshow: 1, // 中间分类展示控制
        uploadradio: 1, // 左边上传布局控制
        // 上传图片地址
        imgone: '',
        imgtwo: '',
        imgthree: '',
        imgfour: '',
        imgfive: '', // 自定义上传
        // 标签样式列表
        graphList: [
          {
            id: 1,
            name: '长条标签'
          },
          {
            id: 2,
            name: '圆标签'
          },
          {
            id: 3,
            name: '小标签'
          },
          {
            id: 4,
            name: '实拍图标签'
          },
          {
            id: 5,
            name: '聚划算'
          },
          {
            id: 6,
            name: '淘抢购'
          },
          {
            id: 7,
            name: '品牌标签'
          },
          {
            id: 8,
            name: '自定义上传'
          }
        ],
        styleradio: 1,
        // 风格下拉框
        styleList: [
          {
            value: 1,
            label: '红色风格'
          },
          {
            value: 2,
            label: '紫色风格'
          },
          {
            value: 3,
            label: '橙色风格'
          },
          {
            value: 4,
            label: '绿色风格'
          },
          {
            value: 5,
            label: '蓝色风格'
          }
        ],
        // 字体大小下拉框 12-32
        sizeList: [
          {
            value: '12',
            label: '12'
          },
          {
            value: '14',
            label: '14'
          },
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          },
          {
            value: '26',
            label: '26'
          },
          {
            value: '28',
            label: '28'
          },
          {
            value: '30',
            label: '30'
          },
          {
            value: '32',
            label: '32'
          }
        ],
        // 字体大小下拉框16-48
        sizeList2: [
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          },
          {
            value: '26',
            label: '26'
          },
          {
            value: '28',
            label: '28'
          },
          {
            value: '30',
            label: '30'
          },
          {
            value: '32',
            label: '32'
          },
          {
            value: '34',
            label: '34'
          },
          {
            value: '36',
            label: '36'
          },
          {
            value: '38',
            label: '38'
          },
          {
            value: '40',
            label: '40'
          },
          {
            value: '42',
            label: '42'
          },
          {
            value: '44',
            label: '44'
          },
          {
            value: '46',
            label: '46'
          },
          {
            value: '48',
            label: '48'
          }
        ],
        // 字体选择
        famiyList: [
          {
            value: '宋体',
            label: '宋体'
          },
          {
            value: 'Arial',
            label: 'Arial'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '微软正黑体',
            label: '微软正黑体'
          },
          {
            value: '楷体',
            label: '楷体'
          },
          {
            value: '新宋体',
            label: '新宋体'
          },
          {
            value: '仿宋',
            label: '仿宋'
          },
          {
            value: 'Times New Roman',
            label: 'Times New Roman'
          },
          {
            value: 'Helvetica',
            label: 'Helvetica'
          },
          {
            value: 'Verdana',
            label: 'Verdana'
          },
          {
            value: 'Tahoma',
            label: 'Tahoma'
          },
          {
            value: 'Trends',
            label: 'Trends'
          }
        ],
        // 预设颜色
        predefineColors: [
          '#FFFFFF',
          '#FF4500',
          '#FF8C00',
          '#FFD700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          '#FF7800'
        ],
        // 主题风格
        stylechooseList: [
          {
            value: 1,
            label: '缤纷_单列'
          },
          {
            value: 2,
            label: '蓝色_单列'
          },
          {
            value: 3,
            label: '橙黄色_单列'
          }
        ],
        stylechoose: 1,
        // 排版风格
        composingstyleList: [
          {
            value: 1,
            label: '单行标题'
          },
          {
            value: 2,
            label: '多行标题'
          }
        ],
        composingstyle: 1
      }
    },
    computed: {},
    created () {
    },
    mounted () {
    },
    methods: {
      // 右侧商品链接获取主图
      dosearch () {
        console.log(this.goodsurl)
        var itemid = ''
        var reg = /id=(\d+)/i
        this.goodsurl.match(reg)
        const idArr = this.goodsurl.match(reg)
        console.log('商品id', idArr[1])
        itemid = idArr[1]
        axios
          .get(
            'http://api-test.shihuizhu.com/tool/goodsImg?url=https:%2F%2Fdetail.tmall.com%2Fitem.htm%3Fid%3D' +
            itemid +
            '&itemid=' +
            itemid,
            {
              // 还可以直接把参数拼接在url后边
              // params: {
              //   title: "眼镜"
              // }
            }
          )
          .then(res => {
            console.log('获取主图返回', res.data.data)
            this.mainimgList = []
            this.yximgList = []
            const mainImg = res.data.data.main_Img // 淘宝主图
            const marketImg = res.data.data.market_Img // 营销图
            if (mainImg.length > 0) {
              for (let i = 0; i < mainImg.length; i++) {
                this.mainimgList.push(mainImg[i].ImgUrl)
              }
            }
            if (marketImg.length > 0) {
              for (let i = 0; i < marketImg.length; i++) {
                this.yximgList.push(marketImg[i].ImgUrl)
              }
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 右侧拖动图片离开盒子
      leaveimg (e) {
        if (this.isdown === true) {
          this.flag = false
          // console.log("down", e.target.currentSrc);
          this.moveimg = e.target.currentSrc
        }
      },
      // 进入目标盒子
      enterdiv (val, index) {
        // console.log(val);
        if (this.flag === false) {
          if (val === 'imgone') {
            this.imgone = this.moveimg
          } else if (val === 'imgtwo') {
            this.imgtwo = this.moveimg
          } else if (val === 'imgthree') {
            this.imgthree = this.moveimg
          } else if (val === 'imgfour') {
            this.imgfour = this.moveimg
          } else if (val === 6) {
            for (let i = 0; i < this.miaoList.length; i++) {
              if (i === index) {
                this.miaoList[i].imgurl = this.moveimg
              }
            }
          } else if (val === 7) {
            for (let i = 0; i < this.baoList.length; i++) {
              if (i === index) {
                this.baoList[i].imgurl = this.moveimg
              }
            }
          }
          this.moveimg = ''
          this.flag = true
          this.isdown = false
        }
      },
      // 复制
      handleOk () {
        if (this.dourl === '') {
          this.$message.info('请先合成图片再复制!')
        } else {
          const obj1 = window.frames['copyFrame']// 获得对应iframe的window对象
          obj1.makeimg = this.dourl
          obj1.domakeimg()
          this.$message.success('复制成功!')
        }
      },
      // 爆品汇总删除最后一个
      colsebaolist () {
        this.baoList.pop()
        this.baoradio = 0
        // console.log("this.baoList", this.baoList);
        var canvasBox3 = document.querySelector('.canvas_box3')
        if (this.cardheight > 660) {
          this.cardheight = canvasBox3.offsetHeight - 190
          console.log(this.cardheight)
        }
        if (this.cardheight < 630) {
          this.cardheight = 650
          console.log(this.cardheight)
        }
        this.baoboxheight = this.cardheight
      },
      // 秒杀预告删除
      colsemiaolist () {
        this.miaoList.pop()
        this.miaoradio = 0
        // console.log("close_miaoList", this.miaoList);
        var canvasBox2 = document.querySelector('.canvas_box2')
        if (this.cardheight > 615) {
          this.cardheight = canvasBox2.offsetHeight - 190
          console.log(this.cardheight)
        }
        if (this.cardheight <= 615) {
          this.cardheight = 615
          console.log(this.cardheight)
        }
        this.miaoboxheight = this.cardheight
      },
      // 关闭图片的显示
      closeimg (val, index) {
        window.event.preventDefault()
        if (val === 1) {
          this.imgone = ''
        }
        if (val === 2) {
          this.imgtwo = ''
        }
        if (val === 3) {
          this.imgthree = ''
        }
        if (val === 4) {
          this.imgfour = ''
        }
        if (val === 5) {
          this.imgfive = ''
        }
        if (val === 6) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i === index) {
              this.miaoList[i].imgurl = ''
            }
          }
        }
        if (val === 7) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i === index) {
              this.baoList[i].imgurl = ''
            }
          }
        }
      },
      // 营销推广图标签的显示
      showtabsdiv (val) {
        if (val === 1) {
          this.long = 1
          this.graphchange(1)
        }
        if (val === 2) {
          const showtabs = this.$refs.showtabs // 获取目标元素
          this.long = 2
          // this.graphBgImg = require('@/assets/images/long_red.png')
          // 文字3
          this.title3 = '60'
          this.title_color3 = '#000000'
          this.title_size3 = '24'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = 'none'
          // 文字2
          this.title2 = '19.9'
          this.title_color2 = '#ffffff'
          this.title_size2 = '23'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '天猫Tmall'
          this.title_color1 = '#ffffff'
          this.title_size1 = '20'
          this.title_famiy1 = 'Trends'

          if (this.uploadradio === 1) {
            showtabs.style.top = '58.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '40%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '43.9%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '87.3%'
            showtabs.style.left = '0px'
          }
        }
        this.$refs.showtabs.style.display = 'block'
      },
      // 营销推广图标签的隐藏
      closediv () {
        this.$refs.showtabs.style.display = 'none'
      },
      // 爆品汇总左侧列表切换
      baoradiochange (val) {
        console.log('baoradio', val)
      },
      // 秒杀左侧列表切换
      miaoradiochange (val) {
        console.log('miaoradio', val)
      },
      // 爆款汇总增加
      addbaolist () {
        var status1 = {
          font: [
            {
              text1: '文字三',
              title1: '[三只松鼠]',
              title_color1: '#ffffff',
              title_size1: '16',

              text2: '文字四',
              title2: '零食大礼包',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '32',

              text4: '文字六',
              title4: '3.20',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          status: 1
        }
        var status2 = {
          font: [
            {
              text1: '文字三',
              title1: '[三只松鼠]',
              title_color1: '#ffffff',
              title_size1: '16',

              text2: '文字四',
              title2: '零食大礼包',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '32',

              text4: '文字六',
              title4: '3.20',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          status: 2
        }
        var status3 = {
          font: [
            {
              text1: '文字三',
              title1: '[三只松鼠]',
              title_color1: '#ffffff',
              title_size1: '16',

              text2: '文字四',
              title2: '零食大礼包',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '32',

              text4: '文字六',
              title4: '3.20',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          status: 3
        }
        var status4 = {
          font: [
            {
              text1: '文字三',
              title1: '[三只松鼠]',
              title_color1: '#ffffff',
              title_size1: '16',

              text2: '文字四',
              title2: '零食大礼包',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '32',

              text4: '文字六',
              title4: '3.20',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          status: 4
        }
        if (this.baostyle === 1) {
          if (this.baoList.length % 4 === 0) {
            this.baoList.push(status1)
          } else if (this.baoList.length % 4 === 1) {
            this.baoList.push(status2)
          } else if (this.baoList.length % 4 === 2) {
            this.baoList.push(status3)
          } else if (this.baoList.length % 4 === 3) {
            this.baoList.push(status4)
          }
        }
        if (this.baostyle === 2) {
          if (this.baoList.length % 2 === 0) {
            this.baoList.push(status1)
          } else {
            this.baoList.push(status3)
          }
        }
        if (this.baostyle === 3) {
          if (this.baoList.length % 2 === 0) {
            this.baoList.push(status2)
          } else {
            this.baoList.push(status4)
          }
        }
        var canvasBox3 = document.querySelector('.canvas_box3')
        // console.log("1+", this.cardheight);
        if (this.cardheight < 1224) {
          if (canvasBox3.offsetHeight < 619) {
            this.cardheight = 640
          } else {
            this.cardheight = canvasBox3.offsetHeight + 210
          }
          console.log('2+', this.cardheight)
        }
        this.baoboxheight = this.cardheight
      },
      // 秒杀预告增加
      doaddlist () {
        var obj1 = {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: true
        }
        var obj2 = {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: false
        }
        if (this.stylechoose === 1) {
          if (this.miaoList.length % 2 === 0) {
            this.miaoList.push(obj1)
          } else {
            this.miaoList.push(obj2)
          }
        }
        if (this.stylechoose === 2) {
          this.miaoList.push(obj1)
        }
        if (this.stylechoose === 3) {
          this.miaoList.push(obj2)
        }
        // console.log("this.miaoList", this.miaoList);
        var canvasBox2 = document.querySelector('.canvas_box2')
        if (this.cardheight < 1224) {
          if (canvasBox2.offsetHeight < 615) {
            this.cardheight = 625
          } else {
            this.cardheight = canvasBox2.offsetHeight + 210
            console.log(this.cardheight)
          }
        }
        this.miaoboxheight = this.cardheight
      },
      // 爆款主题风格切换
      baostylechange (val) {
        console.log('baostyle', val)
        if (val === 1) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 4 === 0) {
              this.baoList[i].status = 1
            } else if (i % 4 === 1) {
              this.baoList[i].status = 2
            } else if (i % 4 === 2) {
              this.baoList[i].status = 3
            } else if (i % 4 === 3) {
              this.baoList[i].status = 4
            }
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 2 === 0) {
              this.baoList[i].status = 1
            } else {
              this.baoList[i].status = 3
            }
          }
        }
        if (val === 3) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 2 === 0) {
              this.baoList[i].status = 2
            } else {
              this.baoList[i].status = 4
            }
          }
        }
      },
      // 秒杀主题风格切换
      stylechoosechange (val) {
        console.log('stylechoose', val)
        if (val === 1) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i % 2 === 0) {
              this.miaoList[i].isblue = true
            } else {
              this.miaoList[i].isblue = false
            }
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].isblue = true
          }
        }
        if (val === 3) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].isblue = false
          }
        }
      },
      // 排版风格切换
      composingstylechange (val) {
        console.log('composingstyle', val)
        if (val === 1) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].font[0].title_size2 = '16'
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].font[0].title_size2 = '14'
          }
        }
      },
      // 风格切换事件
      stylechange (val) {
        console.log('风格切换-styleradio', val)
        if (val === 1) {
          if (this.graphradio === 1) {
            this.graphBgImg = require('@/assets/images/long_red.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#FF0000'
            this.title_color3 = '#FF0000'
            this.title_border3 = '1px solid #FF0000'
          }
          if (this.graphradio === 2) {
            this.graphBgImg = require('@/assets/images/round_red.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 5) {
            this.graphBgImg = require('@/assets/images/ju_red.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 6) {
            this.graphBgImg = require('@/assets/images/tao_red.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 7) {
            this.graphBgImg = require('@/assets/images/none_red.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_color4 = '#ffffff'
            this.title_border3 = 'none'
          }
        }
        if (val === 2) {
          if (this.graphradio === 1) {
            this.graphBgImg = require('@/assets/images/long_purple.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#800080'
            this.title_color3 = '#800080'
            this.title_border3 = '1px solid #800080'
          }
          if (this.graphradio === 2) {
            this.graphBgImg = require('@/assets/images/round_purple.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 5) {
            this.graphBgImg = require('@/assets/images/ju_purple.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
          }
          if (this.graphradio === 6) {
            this.graphBgImg = require('@/assets/images/tao_purple.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
          }
          if (this.graphradio === 7) {
            this.graphBgImg = require('@/assets/images/none_purple.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_color4 = '#ffffff'
          }
        }
        if (val === 3) {
          if (this.graphradio === 1) {
            this.graphBgImg = require('@/assets/images/long_orange.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#FFA500'
            this.title_color3 = '#FFA500'
            this.title_border3 = '1px solid #FFA500'
          }
          if (this.graphradio === 2) {
            this.graphBgImg = require('@/assets/images/round_orange.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 5) {
            this.graphBgImg = require('@/assets/images/ju_orange.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 6) {
            this.graphBgImg = require('@/assets/images/tao_orange.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 7) {
            this.graphBgImg = require('@/assets/images/none_orange.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_color4 = '#ffffff'
            this.title_border3 = 'none'
          }
        }
        if (val === 4) {
          if (this.graphradio === 1) {
            this.graphBgImg = require('@/assets/images/long_green.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#008000'
            this.title_color3 = '#008000'
            this.title_border3 = '1px solid #008000'
          }
          if (this.graphradio === 2) {
            this.graphBgImg = require('@/assets/images/round_green.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 5) {
            this.graphBgImg = require('@/assets/images/ju_green.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 6) {
            this.graphBgImg = require('@/assets/images/tao_green.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 7) {
            this.graphBgImg = require('@/assets/images/none_green.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_color4 = '#ffffff'
            this.title_border3 = 'none'
          }
        }
        if (val === 5) {
          if (this.graphradio === 1) {
            this.graphBgImg = require('@/assets/images/long_blue.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#0000FF'
            this.title_color3 = '#0000FF'
            this.title_border3 = '1px solid #0000FF'
          }
          if (this.graphradio === 2) {
            this.graphBgImg = require('@/assets/images/round_blue.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 5) {
            this.graphBgImg = require('@/assets/images/ju_blue.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 6) {
            this.graphBgImg = require('@/assets/images/tao_blue.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_border3 = 'none'
          }
          if (this.graphradio === 7) {
            this.graphBgImg = require('@/assets/images/none_blue.png')
            this.title_color1 = '#ffffff'
            this.title_color2 = '#ffffff'
            this.title_color3 = '#ffffff'
            this.title_color4 = '#ffffff'
            this.title_border3 = 'none'
          }
        }
      },
      // 移动盒子事件按下
      movedown (e) {
        console.log('按下', e)
        var father = this.$refs.mycanvas
        var son = this.$refs.showtabs
        var changetop = father.offsetHeight - son.offsetHeight
        var changeleft = father.offsetWidth - son.offsetWidth
        console.log(this.$refs)
        const showtabs = this.$refs.showtabs // 获取目标元素
        // console.log("pageY", this.father.pageY);
        // console.log("pageX", this.father.pageX);
        // 算出鼠标相对元素的位置
        const disX = e.clientX - showtabs.offsetLeft
        const disY = e.clientY - showtabs.offsetTop
        document.onmousemove = e => {
          // 鼠标按下并移动的事件
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          const left = e.clientX - disX
          const top = e.clientY - disY
          console.log('top', top)
          // console.log("left", left);
          if (top >= 0 && top <= changetop) {
            showtabs.style.top = top + 'px'
          }
          if (left >= 0 && left <= changeleft) {
            showtabs.style.left = left + 'px'
          }
          // 绑定元素位置到positionX和positionY上面
          // this.positionX = top;
          // this.positionY = left;

          // 移动当前元素
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      // 抬起
      moveup (e) {
        console.log('抬起', e)
      },
      // 标签切换控制
      graphchange (val) {
        console.log('标签切换-graphradio', val)
        this.$refs.showtabs.style.display = 'block'
        this.styleradio = 1
        this.imgfive = ''
        const showtabs = this.$refs.showtabs // 获取目标元素
        if (val === 1) {
          this.long = 1
          this.graphBgImg = require('@/assets/images/long_red.png')
          // 文字3
          this.title3 = '29.9'
          this.title_color3 = '#FF0000'
          this.title_size3 = '20'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = '1px solid red'
          // 文字2
          this.title2 = '劵后价'
          this.title_color2 = '#FF0000'
          this.title_size2 = '14'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '下单立减20元'
          this.title_color1 = '#ffffff'
          this.title_size1 = '20'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '53.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '34%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '41.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '80%'
            showtabs.style.left = '0px'
          }
        }
        if (val === 2) {
          this.graphBgImg = require('@/assets/images/round_red.png')
          // 文字3
          this.title3 = '速度抢'
          this.title_color3 = '#ffffff'
          this.title_size3 = '14'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = 'none'
          // 文字2
          this.title2 = '￥24.9'
          this.title_color2 = '#ffffff'
          this.title_size2 = '28'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '劵后只需:'
          this.title_color1 = '#ffffff'
          this.title_size1 = '14'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
        }
        if (val === 3) {
          // this.graphBgImg = require("@/assets/images/long_red.png");
          // 文字1
          this.title1 = '今日推荐'
          this.title_color1 = '#ffffff'
          this.title_size1 = '20'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
        }
        if (val === 4) {
          // this.graphBgImg = require("@/assets/images/long_red.png");
          // 文字1
          this.title1 = '验货实拍'
          this.title_color1 = '#FF0000'
          this.title_size1 = '30'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
        }
        if (val === 5) {
          this.graphBgImg = require('@/assets/images/ju_red.png')
          // 文字3
          this.title3 = '￥45.6'
          this.title_color3 = '#ffffff'
          this.title_size3 = '28'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = 'none'
          // 文字2
          this.title2 = '到手价：'
          this.title_color2 = '#ffffff'
          this.title_size2 = '16'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '下单立减20元 赶紧抢购吧'
          this.title_color1 = '#ffffff'
          this.title_size1 = '15'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '55.1%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '36%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '41.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '82.5%'
            showtabs.style.left = '0px'
          }
        }
        if (val === 6) {
          this.graphBgImg = require('@/assets/images/tao_red.png')
          // 文字3
          this.title3 = '￥45.6'
          this.title_color3 = '#ffffff'
          this.title_size3 = '28'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = 'none'
          // 文字2
          this.title2 = '到手价：'
          this.title_color2 = '#ffffff'
          this.title_size2 = '16'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '下单立减20元 赶紧抢购吧'
          this.title_color1 = '#ffffff'
          this.title_size1 = '15'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '55.1%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '36%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '41.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '82.5%'
            showtabs.style.left = '0px'
          }
        }
        if (val === 7) {
          this.graphBgImg = require('@/assets/images/none_red.png')
          // 文字4
          this.title4 = '三只松鼠'
          this.title_color4 = '#ffffff'
          this.title_size4 = '14'
          this.title_famiy4 = '微软雅黑'
          // 文字3
          this.title3 = '￥45.6'
          this.title_color3 = '#ffffff'
          this.title_size3 = '28'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = 'none'
          // 文字2
          this.title2 = '到手价：'
          this.title_color2 = '#ffffff'
          this.title_size2 = '16'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '下单立减20元 赶紧抢购吧'
          this.title_color1 = '#ffffff'
          this.title_size1 = '15'
          this.title_famiy1 = '微软雅黑'
          if (this.uploadradio === 1) {
            showtabs.style.top = '55%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '35.5%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '41.2%'
            showtabs.style.left = '0px'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '82.2%'
            showtabs.style.left = '0px'
          }
        }
        if (val === 8) {
          if (this.uploadradio === 1) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
          if (this.uploadradio === 2) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
          if (this.uploadradio === 3) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
          if (this.uploadradio === 4) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
        }
      },
      // 左边布局切换
      uplradchange (val) {
        console.log('上传布局-uploadradio', val)
        this.imgone = ''
        this.imgtwo = ''
        this.imgthree = ''
        this.imgfour = ''
        this.imgfive = ''
        var showtabs = this.$refs.showtabs
        if (val === 1) {
          this.cardheight = 680
          if (this.graphradio === 1) {
            if (this.long === 1) {
              showtabs.style.top = '53.5%'
              showtabs.style.left = '0'
            } else {
              showtabs.style.top = '58.5%'
              showtabs.style.left = '0px'
            }
          }
          if (this.graphradio === 2) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
          if (this.graphradio === 3) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.graphradio === 4) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
          if (this.graphradio === 5) {
            showtabs.style.top = '55.1%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 6) {
            showtabs.style.top = '55.1%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 7) {
            showtabs.style.top = '55%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 8) {
            showtabs.style.top = '54.3%'
            showtabs.style.left = '31.1%'
          }
        }
        if (val === 2) {
          this.cardheight = 680
          if (this.graphradio === 1) {
            if (this.long === 1) {
              showtabs.style.top = '34%'
              showtabs.style.left = '0'
            } else {
              showtabs.style.top = '40%'
              showtabs.style.left = '0px'
            }
          }
          if (this.graphradio === 2) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
          if (this.graphradio === 3) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.graphradio === 4) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
          if (this.graphradio === 5) {
            showtabs.style.top = '36%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 6) {
            showtabs.style.top = '36%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 7) {
            showtabs.style.top = '35.5%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 8) {
            showtabs.style.top = '35%'
            showtabs.style.left = '31%'
          }
        }
        if (val === 3) {
          this.cardheight = 820
          if (this.graphradio === 1) {
            if (this.long === 1) {
              showtabs.style.top = '39.8%'
              showtabs.style.left = '0'
            } else {
              showtabs.style.top = '43.9%'
              showtabs.style.left = '0px'
            }
          }
          if (this.graphradio === 2) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
          if (this.graphradio === 3) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.graphradio === 4) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
          if (this.graphradio === 5) {
            showtabs.style.top = '41.5%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 6) {
            showtabs.style.top = '41.5%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 7) {
            showtabs.style.top = '41.2%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 8) {
            showtabs.style.top = '40.8%'
            showtabs.style.left = '31.3%'
          }
        }
        if (val === 4) {
          this.cardheight = 650
          if (this.graphradio === 1) {
            if (this.long === 1) {
              showtabs.style.top = '80%'
              showtabs.style.left = '0'
            } else {
              showtabs.style.top = '87.3%'
              showtabs.style.left = '0px'
            }
          }
          if (this.graphradio === 2) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
          if (this.graphradio === 3) {
            showtabs.style.top = '0px'
            showtabs.style.left = '0px'
          }
          if (this.graphradio === 4) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
          if (this.graphradio === 5) {
            showtabs.style.top = '82.5%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 6) {
            showtabs.style.top = '82.5%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 7) {
            showtabs.style.top = '82.2%'
            showtabs.style.left = '0'
          }
          if (this.graphradio === 8) {
            showtabs.style.top = '62%'
            showtabs.style.left = '31.1%'
          }
        }
      },
      // 中间顶部分类控制
      setchange (val) {
        console.log('中间顶部分类-leftshow', val)
        this.dourl = ''
        this.saveurl = ''
        if (val === 1) {
          this.uploadradio = 1
          this.graphradio = 1
          this.graphchange(1)
          this.cardheight = 680
          // 文字3
          this.title3 = '29.9'
          this.title_color3 = '#FF0000'
          this.title_size3 = '20'
          this.title_famiy3 = '微软雅黑'
          this.title_border3 = '1px solid red'
          // 文字2
          this.title2 = '劵后价'
          this.title_color2 = '#FF0000'
          this.title_size2 = '14'
          this.title_famiy2 = '微软雅黑'
          // 文字1
          this.title1 = '下单立减20元'
          this.title_color1 = '#ffffff'
          this.title_size1 = '20'
          this.title_famiy1 = '微软雅黑'
        }
        if (val === 2) {
          this.cardheight = this.miaoboxheight
          this.title1 = '精选必抢单'
          this.title_color1 = '#ffffff'
          this.title_size1 = '36'
          this.title_famiy1 = '微软雅黑'

          this.title2 = '明日预告'
          this.title_color2 = '#ffffff'
          this.title_size2 = '28'
          this.title_famiy2 = '微软雅黑'
        }
        if (val === 3) {
          this.cardheight = this.baoboxheight

          this.title1 = '爆款汇总'
          this.title_color1 = '#ffffff'
          this.title_size1 = '36'
          this.title_famiy1 = '微软雅黑'

          this.title2 = '每日更新最火爆优质商品'
          this.title_color2 = '#ffffff'
          this.title_size2 = '16'
          this.title_famiy2 = '微软雅黑'
        }
      },
      // 上传成功7---爆品汇总上传
      uploadSuccess7 (res, file, fileList, val) {
        console.log('上传7', res, file, fileList, val)
        for (let i = 0; i < this.baoList.length; i++) {
          if (i === val) {
            this.baoList[i].imgurl = `http://` + res.data.url
            break
          }
        }
        // this.imgone = "http://" + fileList[0].response.data.url;
        // console.log(this.imgone);
      },
      // 上传成功6---秒杀预告上传
      uploadSuccess6 (res, file, fileList, val) {
        console.log('上传6', res, file, fileList, val)
        // console.log("返回fileList", fileList);
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i === val) {
            this.miaoList[i].imgurl = `http://` + res.data.url
            break
          }
        }
        // this.imgone = "http://" + fileList[0].response.data.url;
        // console.log(this.imgone);
      },
      // 上传成功1
      uploadSuccess1 (res, file, fileList) {
        // console.log("上传1", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgone = 'http://' + fileList[0].response.data.url
        // console.log(this.imgone);
      },
      // 上传成功2
      uploadSuccess2 (res, file, fileList) {
        // console.log("上传2", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgtwo = 'http://' + fileList[0].response.data.url
        // console.log(this.imgtwo);
      },
      // 上传成功3
      uploadSuccess3 (res, file, fileList) {
        // console.log("上传3", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgthree = 'http://' + fileList[0].response.data.url
        // console.log(this.imgthree);
      },
      // 上传成功4
      uploadSuccess4 (res, file, fileList) {
        // console.log("上传4", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgfour = 'http://' + fileList[0].response.data.url
        // console.log(this.imgfour);
      },
      // 上传成功5=>自定义上传
      uploadSuccess5 (res, file, fileList) {
        // console.log("上传4", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgfive = 'http://' + fileList[0].response.data.url
        // console.log(this.imgfour);
      },
      // 上传失败
      uploadError (err, file, fileList) {
        console.log('上传失败信息', err, file, fileList)
        this.$message.error(fileList)
      },
      // 限制上传参数
      beforeAvatarUpload (file) {
        console.log(file.type)
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG,PNG格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return isJPG && isLt2M
      },
      // 营销推广导出为图片
      saveYXImg (val) {
        window.pageYoffset = 0
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 先获取你要转换为img的dom节点
        var node = document.getElementById(val)
        // console.log("node", node);
        var width = node.offsetWidth // dom宽
        var height = node.offsetHeight // dom高
        var scale = 2 // 放大倍数
        //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
        html2canvas(node, {
          width: width,
          heigth: height,
          backgroundColor: '#ffffff', // 背景是否透明 为null 透明
          dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
          scale: scale,
          X: 0,
          Y: 0,
          scrollX: -3, // 如果左边多个白边 设置该偏移
          scrollY: 0,
          useCORS: true, // 是否使用CORS从服务器加载图像 !!!
          allowTaint: true // 是否允许跨域图像污染画布  !!!
        }).then(canvas => {
          // console.log("canvas", canvas);
          var url = canvas.toDataURL() // 这里上面不设值cors会报错
          var a = document.createElement('a')
          a.download = '营销图' // 设置图片名称
          var event = new MouseEvent('click')
          a.href = url
          a.dispatchEvent(event) // 触发a的单击事件
        })
      },
      // 秒杀/爆品 合成为图片
      saveAsImg (val) {
        const loading = this.$loading({
          lock: true,
          text: '合成中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        window.pageYoffset = 0
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 先获取你要转换为img的dom节点
        var node = document.getElementById(val)
        // console.log("node", node);
        var width = node.offsetWidth // dom宽
        var height = node.offsetHeight // dom高
        var scale = 2 // 放大倍数
        //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
        html2canvas(node, {
          width: width,
          heigth: height,
          backgroundColor: '#ffffff', // 背景是否透明 为null 透明
          dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
          scale: scale,
          X: 0,
          Y: 0,
          scrollX: -3, // 如果左边多个白边 设置该偏移
          scrollY: 0,
          useCORS: true, // 是否使用CORS从服务器加载图像 !!!
          allowTaint: true // 是否允许跨域图像污染画布  !!!
        }).then(canvas => {
          // console.log("canvas", canvas);
          var url = canvas.toDataURL() // 这里上面不设值cors会报错

          // var a = document.createElement("a");
          // a.download = "营销图"; //设置图片名称
          // var event = new MouseEvent("click");
          // a.href = url;
          // console.log("a", a);
          // a.dispatchEvent(event); //触发a的单击事件

          this.saveurl = url
          // console.log("url", url);
          doBaseUpload({
            file: url
          })
            .then(res => {
              if (res.code === 200) {
                loading.close()
                console.log('base上传返回', res.data.url)
                this.dourl = 'http://' + res.data.url
                this.$message.success('合成成功!')
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
      }
    }
  }
</script>
<style lang="less" scoped>

  @font-face {
    font-family: Trends;
    font-weight: normal;
    font-style: normal;
    src: url('../../assets/font/Trends.ttf') format('truetype')
  }

  .makespreadimg {
    /deep/ .el-select {
      span {
        display: inline !important;
      }
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 22px;
      font-weight: 600;
    }

    /deep/ .el-input__inner {
      background-color: #ffffff !important;
      color: #333333 !important;
    }

    /deep/ .el-radio__original {
      display: none;
    }
  }

  p {
    margin-bottom: 0;
    text-align: center;
  }

  .display {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // position: relative;
  }

  .display2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .canvas_box2 {
    width: 350px;
    margin: 0 auto;
    margin-top: 10px;

    #miaocanvas {
      .position_box {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        top: 46px;
        left: 0;

        .show_title {
          white-space: nowrap;
        }
      }

      .miaolist::v-deep {
        .el-radio__input {
          display: none;
        }

        .el-radio {
          width: 100%;
          margin-right: 0;
        }

        .el-radio__label {
          padding-left: 0px;
        }

        .miao_main {
          width: 350px;
          border-radius: 10px;
          margin-top: 10px;

          .miao_img {
            position: relative;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .miao_uploadone {
              // width: 170px;
              // padding-top: 10px;
              .el-upload {
                width: 170px;
                height: 170px;
              }
            }

            .rigtitle {
              height: 100%;
              margin-left: 10px;

              .toptie {
                width: 140px;
                overflow: hidden;
                margin-left: 10px;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-wrap: wrap;

                .show_title {
                  width: 100%;
                  white-space: nowrap;
                }
              }
            }
          }
        }

        .miao_main:hover {
          .el-icon-close {
            display: block;
          }
        }
      }
    }
  }

  .canvas_box3 {
    width: 350px;
    margin: 0 auto;
    margin-top: 10px;

    .top_bg {
      border-radius: 10px;
      height: 170px;
      position: relative;
      background: url("~@/assets/images/baobg.png") no-repeat center;

      .position_box {
        position: absolute;
        width: 100%;
        top: 28px;
        left: 0;
      }
    }

    .miaolist::v-deep {
      .el-radio__input {
        display: none;
      }

      .el-radio {
        width: 100%;
        margin-right: 0;
      }

      .el-radio__label {
        padding-left: 0px;
      }

      .miao_main {
        width: 350px;
        border-radius: 10px;
        margin-top: 10px;

        .miao_img {
          position: relative;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .miao_uploadone {
            // width: 170px;
            // padding-top: 10px;
            .el-upload {
              width: 170px;
              height: 170px;
            }
          }

          .rigtitle {
            height: 100%;
            margin-left: 10px;

            .toptie {
              width: 140px;
              overflow: hidden;
              margin-left: 10px;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              flex-wrap: wrap;

              .show_title {
                // width: 100%;
                white-space: nowrap;
              }

              .issue_box {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
              }
            }
          }
        }
      }

      .miao_main:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
  }

  .widgepic {
    width: 100%;
    overflow-x: auto;
    .widgepic_main {
      width: 1200px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;

      .main_box {
        width: 100%;
        overflow-y: auto;
        padding-bottom: 10px;
        //   height: 675px;
        .show_top1 {
          width: 100%;
          margin-top: 10px;

          .uploadradio::v-deep {
            display: flex;
            justify-content: center;

            .el-radio__inner {
              display: none;
            }

            .el-radio__label {
              padding-left: 0px;
            }

            .el-radio {
              margin-right: 20px;
            }

            .pic1 {
              width: 51px;
              height: 76px;
              background: url("~@/assets/images/three.png");
            }

            .pic2 {
              width: 75px;
              height: 75px;
              background: url("~@/assets/images/four.png");
            }

            .pic3 {
              width: 38px;
              height: 75px;
              background: url("~@/assets/images/two.png");
            }

            .pic4 {
              width: 75px;
              height: 75px;
              background: url("~@/assets/images/one.png");
            }

            .pic1:hover {
              background: url("~@/assets/images/three_act.png");
            }

            .pic2:hover {
              background: url("~@/assets/images/four_act.png");
            }

            .pic3:hover {
              background: url("~@/assets/images/two_act.png");
            }

            .pic4:hover {
              background: url("~@/assets/images/one_act.png");
            }

            .is-checked {
              .pic1 {
                background: url("~@/assets/images/three_act.png");
              }

              .pic2 {
                background: url("~@/assets/images/four_act.png");
              }

              .pic3 {
                background: url("~@/assets/images/two_act.png");
              }

              .pic4 {
                background: url("~@/assets/images/one_act.png");
              }
            }
          }
        }

        .canvas_box {
          width: 321px;
          // height: 485px;
          margin: 0 auto;
          margin-top: 10px;

          .mycanvas {
            position: relative;

            .uploadone::v-deep {
              position: relative;
              width: 321px;
              height: 324px;
              background-color: #f6f6f6;
              box-sizing: border-box;
              border: 1px solid red;

              .el-upload-dragger {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
              }

              .el-upload {
                width: 100%;
                height: 100%;
                margin-top: 26px;
              }
            }

            .uploadone:hover {
              background-color: #cccccc;
            }

            .uploadtwo::v-deep {
              width: 162px;
              height: 162px;
              box-sizing: border-box;
              border: 1px solid red;

              .el-upload-dragger {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
              }

              .el-upload {
                width: 100%;
                height: 100%;
                margin-top: 15px;
              }
            }

            .uploadtwo:hover {
              background-color: #cccccc;
            }

            .uploadthree::v-deep {
              width: 162px;
              height: 200px;
              box-sizing: border-box;
              border: 1px solid red;
              background-color: #f6f6f6;

              .el-upload {
                width: 100%;
                height: 100%;
                margin-top: 15px;
              }
            }

            .uploadthree:hover {
              background-color: #cccccc;
            }

            .uploadfour::v-deep {
              width: 162px;
              height: 200px;
              box-sizing: border-box;
              border: 1px solid red;

              .el-upload-dragger {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
              }

              .el-upload {
                width: 100%;
                height: 100%;
                margin-top: 15px;
              }
            }

            .uploadfour:hover {
              background-color: #cccccc;
            }

            .uploadfour::v-deep {
              width: 162px;
              height: 200px;
              box-sizing: border-box;
              border: 1px solid red;

              .el-upload-dragger {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
              }

              .el-upload {
                width: 100%;
                height: 100%;
                margin-top: 15px;
              }
            }

            .uploadfour:hover {
              background-color: #cccccc;
            }

            .uploadradio1 {
              .img_box::v-deep {
                height: 100%;
                position: relative;

                .el-icon-close {
                  display: none;
                  cursor: pointer;
                  z-index: 200;
                  position: absolute;
                  top: 2px;
                  right: 2px;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  background: #fff;
                  font-weight: 600;
                  font-size: 20px;
                  font-style: normal;
                  color: #5680fe;
                  text-align: center;
                  border-radius: 15px;
                  transition: all linear 0.5s;
                }

                .el-icon-close:hover {
                  background: #607bfe;
                  color: #fff;
                  transform: rotate(90deg);
                  -webkit-transform: rotate(90deg);
                }
              }

              .img_box:hover {
                .el-icon-close {
                  display: block;
                }
              }
            }
          }
        }
      }

      // 中间设置
      .main_top {
        margin: 20px auto 0;
      }

      .main_content {
        .graph_box::v-deep {
          padding: 10px;
          margin: 0 auto;

          .el-radio-group {
            margin-left: 27px;
          }

          .el-radio {
            margin-right: 8px;
            padding: 8px 0;
          }
        }

        .setgraph_box {
          .top_img {
            width: 370px;
            // height: 126px;
            margin: 0 auto;
            border-radius: 10px;
            background-color: #eeeeee;
            padding-bottom: 22px;
          }

          .top_img:hover {
            background: linear-gradient(180deg, #fee7e5, #f0ccff);
          }

          .top_imgs {
            width: 370px;
            // height: 126px;
            margin: 0 auto;
            border-radius: 10px;
            background-color: #eeeeee;
            padding-bottom: 22px;
          }

          .top_imgs:hover {
            background: linear-gradient(180deg, #fee7e5, #f0ccff);
          }
        }
      }

      // 右侧盒子
      .main_box3::v-deep {
        padding: 8px;

        .el-input {
          box-sizing: border-box;

          .el-input__inner {
            border: 2px solid #409eff;
            border-radius: unset;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
          }
        }

        .el-button {
          // border: 2px solid #409eff;
          padding-bottom: 13px;
          border-radius: unset;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }

        .leftline {
          display: inline-block;
          vertical-align: middle;
          width: 3px;
          height: 18px;
          background-color: #007aff;
          box-sizing: border-box;
        }

        .lefttitle {
          display: inline-block;
          vertical-align: middle;
          font-size: 16px;
          color: #007aff;
          margin-left: 3px;
        }

        .rightinfo {
          white-space: nowrap;
          line-height: 28px;
          color: #999;
        }

        .mainimg_box {
          padding: 0 8px;
          height: 216px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap;

          .tbmainimg {
            box-sizing: border-box;
            width: 102px;
            height: 102px;
            margin-bottom: 8px;
          }

          .tbmainimg:hover {
            border: 1px solid blue;
          }
        }

        .mian_span {
          display: inline-block;
          box-sizing: border-box;
          width: 100px;
          height: 100px;
          background-color: #f2f2f2;
        }

        .mian_span:hover {
          border: 1px solid blue;
        }
      }
    }

    .img_box {
      position: relative;
    }

    .img_box:hover {
      .el-icon-close {
        display: block;
      }
    }

    // 公共样式
    .el-icon-close {
      display: none;
      cursor: pointer;
      z-index: 200;
      position: absolute;
      top: 2px;
      right: 2px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-weight: 600;
      font-size: 20px;
      font-style: normal;
      color: #5680fe;
      text-align: center;
      border-radius: 15px;
      transition: all linear 0.5s;
    }

    .el-icon-close:hover {
      background: #607bfe;
      color: #fff;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }

    .show_img {
      position: relative;
      width: 321px;
      height: 65px;
      margin: 0 auto;
      z-index: 200;
      background-position-y: bottom;
      background-size: 100%;

      .show_title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 240px;
        height: 33px;
        line-height: 33px;
        // background-color: #fff;
      }

      .show_info {
        position: absolute;
        right: 2px;
        bottom: 0;
        width: 64px;
        height: 70px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        p {
          padding-top: 17px;
          width: 64px;
        }

        div {
          font-weight: 700;
          width: 45px;
          height: 40px;
          text-align: center;
          padding-bottom: 11px;
        }
      }
    }

    .show_img2 {
      position: relative;
      width: 140px;
      height: 140px;
      margin: 0 auto;
      z-index: 200;
      background-position-y: bottom;
      background-size: 100%;

      .show_title {
        text-align: center;
        width: 100%;
        height: 33.3%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sh1 {
        align-items: flex-end;
      }
    }

    .show_img2.active {
      width: 120px;
      height: 120px;
    }

    .show_imgs {
      position: relative;
      width: 321px;
      height: 40px;
      line-height: 40px;
      /*z-index: 200;*/
      background-position-y: bottom;
      background-size: 100% 100%;

      .show_title {
        width: 108px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 106px;
        white-space: nowrap;
      }

      .show_title2 {
        height: 40px;
        width: 49px;
        position: absolute;
        top: 0;
        left: 28px;
        white-space: nowrap;
      }

      .show_title3 {
        height: 40px;
        width: 50px;
        position: absolute;
        top: 0;
        right: 19px;
        text-align: center;
        white-space: nowrap;
      }

    }

    .graph3_box::v-deep {
      // width: 411px;
      height: 342px;

      .el-radio-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        .el-radio {
          margin-right: 0;

          .el-radio__input {
            display: none !important;
          }
        }
      }

      .graph3 {
        width: 190px !important;
        margin: 0px 0px 20px !important;
        height: 90px !important;
        border-radius: 10px;
        background-color: #eeeeee;
        padding-bottom: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .iconfont_box {
      position: relative;
      width: 120px;
      height: 43px;
      text-align: center;
      overflow: hidden;

      .icon_i {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
      }

      .sh2 {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        line-height: 43px;
      }

      .sh3 {
        width: 100%;
        position: absolute;
        top: 29px;
        width: 56px;
        left: 9px;
        height: 52px;
        white-space: normal;
        line-height: initial;
      }
    }

    .graph3:hover {
      background: linear-gradient(180deg, #fee7e5, #f0ccff);
    }

    .bg_box {
      position: relative;
      width: 130px;
      height: 130px;
      background-color: #fff;
      border-radius: 50%;
      border: 4px solid #fe293c;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 17px;
      box-sizing: border-box;
      letter-spacing: 1em;

      .bg_title {
        // position: absolute;
        font-weight: 500;
        box-sizing: border-box;
        z-index: 999;
      }

      .bg_h {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        border-top: 1px dashed #ffabb3;
        opacity: 0.5;
        font-weight: 400;
        font-style: normal;
        box-sizing: border-box;
      }

      .bg_s {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
        border-left: 1px dashed #ffabb3;
        opacity: 0.5;
        font-weight: 400;
        font-style: normal;
        box-sizing: border-box;
      }
    }

    .title4 {
      width: 86px;
      height: 24px;
      line-height: 24px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .uploadfive::v-deep {
      width: 140px;
      height: 140px;
      background-color: #fff;
      border-radius: 50%;
      flex-direction: column;
      color: #5490ff;
      overflow: hidden;
      user-select: none;
      background-size: 100% 100%;
      box-sizing: border-box;
      border: 1px solid red;
      margin: 0 auto;

      .el-upload-dragger {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .el-upload {
        width: 100%;
        height: 100%;
        // margin-top: 15px;
      }

      .img_box {
        height: 100%;
        position: relative;
        border-radius: 8px;
        overflow: hidden;

        .el-icon-close {
          display: none;
          cursor: pointer;
          z-index: 200;
          position: absolute;
          top: 2px;
          right: 56px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          background: #fff;
          font-weight: 600;
          font-size: 20px;
          font-style: normal;
          color: #5680fe;
          text-align: center;
          border-radius: 15px;
          transition: all linear 0.5s;
        }

        .el-icon-close:hover {
          background: #607bfe;
          color: #fff;
          transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
        }
      }

      .img_box:hover {
        .el-icon-close {
          display: block;
        }
      }
    }

    // 定位活动标签
    .show_tabs {
      position: absolute;
      // width: 100%;
      .el-icon-close {
        display: none;
        cursor: pointer;
        z-index: 16;
        position: absolute;
        top: -10px;
        right: 2px;
        // float: right;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background: #fff;
        font-weight: 600;
        font-size: 14px;
        font-style: normal;
        color: #5680fe;
        text-align: center;
        border-radius: 15px;
        transition: all linear 0.5s;
      }

      .el-icon-close:hover {
        background: #607bfe;
        color: #fff;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
      }

      .iconfont_box {
        position: relative;
        width: 120px;
        height: 43px;
        text-align: center;
        overflow: hidden;

        .icon_i {
          position: absolute;
          top: -9px;
          left: 0px;
          height: 100%;
        }

        .sh2 {
          width: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          line-height: 43px;
        }

        .sh3 {
          width: 100%;
          position: absolute;
          top: 29px;
          width: 56px;
          left: 9px;
          height: 52px;
          white-space: normal;
          line-height: initial;
        }
      }
    }

    .show_tabs:hover {
      cursor: move;
      user-select: none;

      .el-icon-close {
        display: inline-block;
      }
    }

    /deep/ .el-radio-button__orig-radio {
      position: absolute !important;
    }
  }
</style>
